<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>奥特曼卡牌八卦阵-vant组件版</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.9/index.css" rel="stylesheet">
    <style>
        body {
            background-color: #fff;
        }
		
		.dianNaoFangBeiJing {
			background-color: #99bbff;
		}
		
		.test1 {
			font-size:10px;
		}
    </style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.8.1/vue-router.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.9/vant.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>

<script type="text/x-template" id="JiFenQu">
	<div>JiFenQu</div>
</script>
<script type="text/x-template" id="ShouPaiQu">
	<!--  ShouPaiQu <van-cell></van-cell> -->
		<div class="test1"> 
		<van-row>
			手牌区
		</van-row>
		<van-row>
			手牌数
		</van-row>
		<van-row>
			11
		</van-row> 
		</div>
</script>
<script type="text/x-template" id="JiPaiQu">
	<!-- JiPaiQu -->
	<div class="test1">
		<van-row>
			祭牌区
		</van-row>
		<van-row>
			祭牌数
		</van-row>
		<van-row>
			11
		</van-row>	
	</div>
</script>
<script type="text/x-template" id="PaiDuiQu">
	<!-- PaiDuiQu -->
	<div>
		<van-row>
			牌堆区
		</van-row>		
		<van-row>
			牌堆数
		</van-row>
		<van-row>
			11
		</van-row>
	</div>
</script>
<script type="text/x-template" id="XiuXiQu">
	<!-- XiuXiQu -->
	<div>
		<van-row>
			休息区
		</van-row>
		<van-row>
			休牌数
		</van-row>
		<van-row>
			11
		</van-row>
	</div>
</script>
<script type="text/x-template" id="game">
<div>
	<!-- <h1>{{ msg }}</h1> -->
	<van-cell-group>
		<van-cell>
			<van-row>
				<van-col span="6"><ShouPaiQu/></van-col>
				<van-col span="6"><JiPaiQu/></van-col>
				<van-col span="6"><PaiDuiQu/></van-col>
				<van-col span="6"><XiuXiQu/></van-col>
			</van-row>
		</van-cell>
		<van-cell class="dianNaoFangBeiJing">
			<van-row>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
			</van-row>
		</van-cell>
		<hr>
		<van-cell>
			<van-row>
				<van-col span="6">玩家得分：</van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">电脑得分：</van-col>
				<van-col span="6">1</van-col>
			</van-row>
		</van-cell>
		<hr>
		<van-cell class="dianNaoFangBeiJing">
			<van-row>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
			</van-row>
		</van-cell>
		<van-cell>
			<van-row>
				<van-col span="6"><ShouPaiQu/></van-col>
				<van-col span="6"><JiPaiQu/></van-col>
				<van-col span="6">1</van-col>
				<van-col span="6">1</van-col>
			</van-row>
		</van-cell>
		<van-cell>
			<CardButton/>
		</van-cell>
	</van-cell-group>
	<!-- 
	<van-dialog v-model="show1" title="标题" show-cancel-button>
		<img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
	</van-dialog>
	-->
</div>
</script>


<script type="text/x-template" id="CardButton">
<div>
	操作按钮
	<!-- 
	<van-popup v-model="show">内容</van-popup>
	<van-popup v-model="show1a" position="top" :style="{ height: '30%' }">内容</van-popup>
	<van-popup v-model="show1" round position="bottom" :style="{ height: '30%' }" >内容</van-popup> 
	-->
	
	<van-popup v-model="show1" 
	:style="{ height: '30%',width: '65%' }" 
	get-container="#app">
		卡牌内容
		<br>
		{{ msg }}
	</van-popup>

	<br>
	<van-button v-for="item1 in shouPais2"
		:key="item1.id"
		type="primary"
		size="mini"
		@click="click1(item1.name)"
	>
		{{ item1.name }}
	</van-button>
</div>
</script>

<script src="main.js"></script>
<script src="game.js"></script>
<script type="text/javascript">
	var bus = new Vue();
	var routes = [
		{path: '/',component: Vue.component('home')},
		{path: '/game',component: Vue.component('game')}
	];

	var router = new VueRouter({routes});
	
	var vm = new Vue({
		router,
		el: '#app'
	})
</script>

</html>